class Banner {
    constructor(select) {
            this.ele = document.querySelector(select);
            this.imgBox = this.ele.querySelector('.imgBox');
            this.pointBox = this.ele.querySelector('.pointBox');
            // 索引的变量
            this.index = 0;
            // 定时器
            this.timer = 0;
            // 自己调用
            this.init();
        }
        // 初始化
    init() {
        this.setDian();
        // this.changeOne(this.index);
        this.autoPlay();
        this.nirnic();
        this.xndn()
    }
    setDian() {
        // 通过imgBox的子元素数量来生产几个点
        const dian = this.imgBox.children.length;
        for (let i = 0; i < dian; i++) {
            const li = document.createElement('li');
            // 默认第一个页面
            if (i === 0) li.classList.add('active');
            // 添加class=‘point’
            li.classList.add('point');
            // 自定义属性添加
            li.dataset.point = i;
            this.pointBox.appendChild(li);
        }
        // 指示器宽度随点数变化
        this.pointBox.style.width = (15) * dian + 'px';
    }
    changeOne(type) {
            this.imgBox.children[this.index].classList.remove('active');
            this.pointBox.children[this.index].classList.remove('active');
            // 3种情况 进行切换
            if (type === true) {
                this.index++;
            } else if (type === false) {
                this.index--;
            } else {
                this.index = type;
            }
            // 边界处理
            if (this.index >= this.imgBox.children.length) this.index = 0;
            if (this.index < 0) this.index = this.imgBox.children.length - 1;
            this.imgBox.children[this.index].classList.add('active');
            this.pointBox.children[this.index].classList.add('active');
        }
        // 自动播放
    autoPlay() {
            this.timer = setInterval(() => this.changeOne(true), 2000);
        }
        // 移入移出
    nirnic() {
            this.ele.addEventListener('mouseover', () => {
                clearInterval(this.timer);
            })
            this.ele.addEventListener('mouseout', () => this.autoPlay())
        }
        // 点哪指哪
    xndn() {
        this.ele.addEventListener('click', (e) => {
            const x = e.target;
            if (x.className === 'left') this.changeOne(false);
            if (x.className === 'right') this.changeOne(true);
            if (x.className === 'point') this.changeOne(x.dataset.point)

        })
    }
}